<template>
  <div class="product">
    <div class="bgt">
      <img src="/img/banner/banner1.webp" alt="" />
      <div>SHOP</div>
    </div>
    <div class="box" v-if="pcount">
      <ul>
        <li
          v-for="(p, i) of products"
          :key="i"
          class="d1 animate__animated animate__bounceInRight"
        >
          <router-link :to="`/about/${p.pid}`">
            <div class="pic"><img :src="p.pic" alt="" /></div>
            <p>{{ p.pname }}</p>
          </router-link>
          <div class="details">
            <p>
              {{ p.details }}
            </p>
            <p>
              -&nbsp;&nbsp;材&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;质:{{
                p.material
              }}<br />
              -&nbsp;&nbsp;使用范围:{{ p.usable }}<br />
              -&nbsp;&nbsp;注意事项:{{ p.attention }}<br />
            </p>
          </div>
          <div class="price">
            <p>
              <span>¥{{ p.oldprice }}</span
              >&nbsp; ¥{{ p.price }}
            </p>
            <button @click="add(1, uid, p.pid)">加入购物车</button>
          </div>
        </li>
      </ul>
    </div>
    <div class="kong" v-else>
      <p>您搜索的商品空空如也~~~</p>
      <p>请换一个商品试试哟</p>
    </div>
    <div class="button" v-show="pcount">
      <button
        :disabled="pno == 0"
        :class="{ btn: pno == 0 }"
        @click="change(-1)"
      >
        上一页
      </button>
      <ul>
        <li
          :class="{ active: i - 1 == pno }"
          v-for="i of pcount"
          :key="i"
          v-text="i"
          @click="changepage(i - 1)"
        ></li>
      </ul>
      <button
        :disabled="pno == pcount - 1"
        :class="{ btn: pno == pcount - 1 }"
        @click="change(+1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      pno: 0,
      pcount: 0,
      products: [],
    };
  },
  props: ["kw"],
  methods: {
    ...mapMutations(["setCounts"]),
    add(count, uid, pid) {
      if (this.uname == "") {
        this.$alert("检测到您未登录，请先登录", "温馨提示", {
          callback: () => {
            this.$router.push("/login");
          },
        });
      } else {
        this.axios
          .get(`/cart/add?uid=${uid}&pid=${pid}&count=${count}`)
          .then((res) => {
            var counts = parseInt(this.counts) + parseInt(count);
            sessionStorage.setItem("counts", counts);
            this.setCounts(counts);
            // console.log(res);
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          });
      }
    },
    change(n) {
      this.changepage(parseInt(this.pno) + parseInt(n));
      console.log(parseInt(this.pno) + parseInt(n));
    },
    changepage(i) {
      this.load(i);
    },
    load(pno = 0) {
      this.axios
        .get("/products/search", {
          params: {
            kw: this.kw,
            pno,
          },
        })
        .then((result) => {
          //   console.log(result.data);
          this.pno = result.data.pno;
          this.products = result.data.data;
          this.pcount = result.data.pageCount;
        });
    },
  },
  created() {
    this.load();
  },
  watch: {
    kw() {
      this.load();
    },
  },
  computed: {
    ...mapState(["uid", "uname", "counts"]),
  },
};
</script>





<style>
.product .bgt {
  position: relative;
  width: 100%;
  height: 460px;
  margin-bottom: 70px;
}
.product .bgt img {
  width: 100%;
  height: 460px;
}
.product .bgt div {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: Raleway;
  font-size: 40px;
  font-weight: normal;
  font-style: normal;
  color: #000000;
  transform: translate(-50%, -50%);
}
.product .box {
  width: 100%;
  /* height: 1815px; */
}
.product .box ul {
  width: 868px;
  height: 1900px;
  /* background-color: #eee; */
  margin: 0 auto;
}
.product .box ul li {
  width: 858px;
  height: 575px;
  padding: 0 5px 30px 5px;
  margin-bottom: 30px;
  /* border: 1px solid #ddd; */
  /* background-color: #ccc; */
}
.product .box ul li:hover {
  box-shadow: 0px 0px 5px #ccc;
  /* transform: translateY(-3px); */
}
.product .box ul li a {
  text-align: center;
  outline: none;
}
.product .box ul li .pic {
  height: 304px;
  margin-bottom: 10px;
}
.product .box ul li .pic img {
  width: 240px;
  height: 300px;
}
.product .box ul li a p {
  height: 24px;
  padding-top: 4px;
  font-weight: normal;
  color: #000000;
  line-height: 18px;
  vertical-align: top;
  text-align: center;
  margin-bottom: 5px;
}
.product .box ul li .details {
  width: 646px;
  height: 120px;
  font-size: 12px;
  color: #888888;
  margin: 20px 40px 0 0;
  line-height: 20px;
}
.product .box ul li .details p {
  margin-bottom: 10px;
}
.product .box ul li .price {
  height: 78px;
  margin-top: 10px;
  text-align: center;
}
.product .box ul li .price p {
  font-size: 18px;
  color: #000;
}
.product .box ul li .price p span {
  font-size: 14px;
  color: #aaa;
  text-decoration: line-through;
}
.product .box ul li .price button {
  width: 798px;
  height: 38px;
  padding: 0 80px;
  margin-top: 15px;
  background-color: #f5f5f5;
  border-color: transparent;
  color: #000;
  font-size: 13px;
}
.product .box ul li .price button:hover {
  color: #ffffff;
  background-color: #d19f4f;
}
.product .button {
  width: 868px;
  height: 30px;
  margin: 0 auto 50px;
}
.product .button button {
  float: left;
  width: 54px;
  height: 30px;
  border: 2px solid #e5e5e5;
  background-color: #e5e5e5;
  color: #333333;
  font-size: 12px;
  line-height: 12px;
  margin-right: 8px;
}
.product .button ul {
  float: left;
}
.product .button ul li {
  float: left;
  width: 15px;
  padding: 8px;
  border: 1px solid #e5e5e5;
  background-color: #e5e5e5;
  color: #333333;
  font-size: 12px;
  line-height: 12px;
  margin-right: 8px;
  text-align: center;
  cursor: pointer;
}
.product .button ul .active {
  border: 2px solid #e5e5e5;
  background-color: #fff;
  color: #d19f4f;
}
.product .button .btn {
  background-color: #fff;
}
.product .kong {
  width: 1200px;
  height: 450px;
  margin: 100px auto;
  text-align: center;
  font-size: 14px;
  color: #777777;
}
.product .kong p {
  margin: 50px;
  font-size: 25px;
}
</style>